<template>
  <section>
    <section class="filter-bar mb-16">
      <span class="label">标签名称：</span>
      <a-input class="mr-24 w-300" allow-clear placeholder="请输入标签名称" v-model="name" @pressEnter="search" maxLength="50"/>
      <a-button type="primary" @click="search">查询</a-button>
      <a-button class="ml-8" @click="reset">重置</a-button>
      <a-button
        v-if="$permissionJudge('VehicleTagCreate')"
        style="float: right" type="primary" icon="plus"
        @click="createOrEdit()">新建手动标签
      </a-button>
    </section>
    <a-alert class="mb-10" :message="`自动标签由平台创建并确定，由一套定量规则自动赋予服务商库存车辆，系统负责维护；人工标签由管理员维护，并可由服务商使用。`" type="info"
             show-icon/>
    <a-table
      class="table-con"
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <template #code="val">
        <a-tooltip :title="val">
          <span class="overflow" style="display: inline-block;max-width:140px">{{ val }}</span>
        </a-tooltip>
      </template>
      <template #description="val">
        <a-tooltip :title="val">
          <span class="overflow" style="display: inline-block;max-width:550px">{{ val }}</span>
        </a-tooltip>
      </template>
      <template #action="val,data">
        <a v-if="$permissionJudge('VehicleTagUpdate')&&data.type===1" @click="createOrEdit(data)" href="javascript:">编辑描述</a>
        <a v-if="($permissionJudge('VehicleTagUpdate'))&&data.type!==1" class="mr-10" @click="createOrEdit(data)"
           href="javascript:">编辑</a>
        <a v-if="($permissionJudge('VehicleTagDelete'))&&data.type!==1" style="color:red;" @click="deleteData(data)"
           href="javascript:">删除</a>
      </template>
    </a-table>
    <!--修改手动标签-->
    <a-modal
      :maskClosable="false"
      :title="!info.id?'新建手动标签':info.type===1?'修改自动标签描述':'修改手动标签'"
      :width="650"
      :visible="showModal"
      :confirm-loading="confirmLoading"
      :ok-type="'primary'"
      @ok="confirmOk"
      @cancel="cancel"
    >
      <a-form :form="form">
        <a-row :gutter="[24,0]" v-if="info.type!==1">
          <a-col :span="24">
            <a-form-item class="mb-15" label="标签编码" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input
                class="w-full"
                placeholder="请输入标签编码"
                v-decorator="[
							'code',
							{rules: [{required: true,whitespace: true,message: '请输入标签编码'}]}
						]"
                maxLength="40"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24,0]" v-if="info.type!==1">
          <a-col :span="24">
            <a-form-item class="mb-15" label="标签名称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input
                class="w-full"
                placeholder="请输入标签名称"
                v-decorator="[
							'name',
							{rules: [{required: true,whitespace: true,message: '请输入标签名称'}]}
						]"
                maxLength="15"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24,0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="标签描述" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-textarea
                placeholder="请输入标签描述"
                v-decorator="['description']"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                maxLength="300"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </section>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import {
  getVehicelTagList,
  addVehicleTag,
  editVehicelTag,
  editVehicelAutoTag,
  deleteVehicelAutoTag
} from '@/api/vehicleTag'

export default {
  name: 'TagMaintenance',
  mixins: [tableMixins],
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      showModal: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      loading: false,
      name: undefined,
      pageNum: 1,
      rowsNum: 10,
      columns: [
        {dataIndex: 'code', title: '标签编码', align: 'center', scopedSlots: {customRender: 'code'}},
        {dataIndex: 'name', title: '标签名称', align: 'center', scopedSlots: {customRender: 'name'}},
        {
          dataIndex: 'description',
          title: '标签描述',
          align: 'center',
          scopedSlots: {customRender: 'description'},
          width: '65%'
        },
        {dataIndex: 'typeDesc', title: '类型', align: 'center'},
        {title: '操作', scopedSlots: {customRender: 'action'}, width: 110, align: 'center'}
      ],
      data: [],
      info: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    deleteData(data) {
      this.$confirm({
        title: '提示',
        content: `确定要删除【${data.name}】标签吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          if (this.confirmLoading) return false
          this.confirmLoading = true
          deleteVehicelAutoTag({id: data.id}).then(() => {
            this.$message.success('删除成功！')
            this.search()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    confirmOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const {id, type} = this.info
          const fun = !id ? addVehicleTag : type === 1 ? editVehicelAutoTag : editVehicelTag
          const {name, description, code} = values
          fun({
            id,
            type,
            code: code ? code.trim() : undefined,
            name: name ? name.trim() : undefined,
            description: description && description.trim() ? description.trim() : ''
          }).then(() => {
            this.$message.success(id ? '编辑成功！' : '新建成功！')
            this.$emit('upload')
            this.getData()
            this.cancel()
          })
        }
      })
    },
    createOrEdit(data) {
      this.showModal = true
      if (data) {
        this.info = data
        this.$nextTick(() => {
          const {type, code, name, description} = data
          let params = {description}
          if (type !== 1) {
            params = {code, name, ...params}
          }
          this.form.setFieldsValue(params)
        })
      }

    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.name = undefined
      this.search()
    },
    getData() {
      this.loading = true
      const {rowsNum, pageNum, name} = this
      getVehicelTagList({
        search: name,
        rowsNum, pageNum
      }).then(res => {
        const {items, rowCount} = res
        this.data = items
        this.total = rowCount
      }).finally(() => {
        this.loading = false
      })
    },
    cancel() {
      this.info = {}
      this.confirmLoading = false
      this.form.resetFields()
      this.showModal = false
    }
  }
}
</script>
<style lang="less" scoped>
.table-con {
  /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }
}
</style>
